Today we will be working on a 2D side scrolling engine. This engine will layout the basis for a full fledged game in future newsletters. This engine that we’re creating now, can also be used as a tile editor in its primitive state. It’s important to digest this information slowly, and even run the program before reading it just so you know what to expect. J

Section 2 - Quick Theory

To help illustrate what exactly a scrolling tile engine is, here’s a helpful illustration.

Figure 2.1

As you can see, the basis of the engine is that there’s tons of tiles that layout your world. These tiles of course cannot and should not all be pasted as one, for that would lower your performance (Not to mention overwhelm you user!). So as you can obviously tell, you shift left, right, up, and down to display all the different tiles. Lets go ahead and get started!

Section 3 - Source

Back to the future? NO WAY!

2D is not a thing of the past, and it never will be. Sure 3D is more common in the games

you'd buy in shelves, but in the shareware world, 2D is booming! Not to mention the fact

that 2D will keep you from getting a few more headaches! Not to say that 2D is anymore

simplier than 3D, but with 1 less dimension to worry about, 2D is perfect for beginners.

So what exactly are we making this month? Well, those of you who've always wanted to make

MARIO, Metroid Prime, or a Castlevania game are in luck! We'll begin working on a 2D

scrolling engine, and eventually building a full blown 2D side scroller!

Lets go ahead and get started!

Here is our routine setup.

First we flush the video memory to make sure we get the best usage out of our

programs. This is especially important for graphics intensive programs, and generally

good practice.

After that, we set the sync rate on(refresh rate of 60), and then turn the backdrop on.

Finally, we setup our window, the resolution, and the title.

flush video memory

sync on : sync rate 60

backdrop on

set display mode 640,480,32

set window size 640,480

set window title "Scrolling tiles!"

Here are some important constants that will determine the size of our map.

Note that constants are exactly like variables, except they're not dynamic. Once

a constant is assigned, it cannot be changed.

#Constant Dimensions 17

#Constant TileSize 32

#Constant MapSize 150

Here we're just clearing the screen to a specific color, and then grabbing a

little section to use as an image for this program.

cls rgb(0,0,192)

get image 1,0,0,32,32

cls rgb(0,128,0)

get image 2,0,0,31,31

cls rgb(160,96,0)

get image 3,0,0,31,31

cls rgb(255,0,0)

get image 4,0,0,31,31

cls rgb(255,192,0)

get image 5,0,0,31,31

Next we create two arrays.

The first array(GRID), will hold the data of which tile is where on the x,y coordinates.

The next array(DISPLAY), works as a sort of temporary array. It's values will constantly

change, and it will only display what I will refer to as "relative" tiles. These relative

tiles are the only tiles that the user will actually see at once. As we move around our

screen, it will appear as though we're actually scrolling, when in fact, we're just shift

the tiles left, right, up, and down.

dim Grid(MapSize,MapSize)

dim Display(Dimensions,Dimensions)

`Assign a random value to the Grid array.

for x = 0 to MapSize

for y = 0 to MapSize

Grid(x,y)=rnd(1)+1

next x

next y

`Our main loop

cls `clear the screen.

Here is where the actual shifting values occur.

We shift on the x and y axis accordingly with the variables "currentx" and "currenty".

We of course put restrictions on these variables(currentx>0 for example), to insure

that we won't go out of bounds in our array later.

if leftkey()=1 and currentx>0

currentx=currentx-1

endif

if rightkey()=1 and currentx<MapSize

currentx=currentx+1

endif

if downkey()=1 and currenty<(MapSize-1)

currenty=currenty+1

endif

if upkey()=1 and currenty>0

currenty=currenty-1

endif

Here is the simple for-next loop that breaks everything down.

For the current dimensions, the GRID array data is applied to our DISPLAY array.

This is then the array that we use to paste the various images to the screen with.

for x = 0 to Dimensions

for y = 0 to Dimensions

if currentx+x>MapSize or currenty+y>MapSize `Ensure we're not out of bounds on our array.

Display(x,y)=Grid(150,150) `If we are, just assign the last GRID value.

else `If we're not out of bounds, shift values

`to the DISPLAY array.

Display(x,y)=Grid(x+currentx,y+currenty)

endif

if Display(x,y)=1 then paste image 1,x*TileSize,y*TileSize

if Display(x,y)=2 then paste image 2,x*TileSize,y*TileSize

if Display(x,y)=3 then paste image 3,x*TileSize,y*TileSize

if Display(x,y)=4 then paste image 4,x*TileSize,y*TileSize

if Display(x,y)=5 then paste image 5,x*TileSize,y*TileSize

next x

next y

`This is just a simple text statement to help show us the values of each tile in the

`DISPLAY array.

if spacekey()=0

for x=0 to Dimensions

for y=0 to Dimensions

text x*TileSize,y*TileSize,str$(Display(x,y))

next x

next y

endif

Now that the array is pasted, we can now start to change the tiles around. This is a

great start to a little tile map editor.

So now we have the variables TileX and TileY that we must assign.

We do this by getting the mouse coordinates, and then dividing it by the tile size.

We of course must also take into consideration if there's been a shift, so we use our

"currentx" and "currenty" tile variables to ensure that the TileX/TileY values shift as

well.

TileX=((mousex()+(currentx*32))/TileSize)*1.0

TileY=((mousey()+(currenty*32))/TileSize)*1.0

Remember earlier when I mentioned relative tile coordinates in the DISPLAY array?

Well, here they are so we can use them for general debugging perposes if necessary.

relativeTileX=(mousex()/TileSize)*1.0

relativeTileY=(mousey()/TileSize)*1.0

Now that we know what tiles are what value, and which tile we'er on, we can start editing

them. We'll do this by left and right clicking to change the tile values.

Once we click them, then all we have to do is make the change in our GRID array, and

voila, easy as pie!

if mouseclick()=1 and TileX<=MapSize and TileY<=MapSize

inc Grid(TileX,TileY),1

wait 100

endif

if mouseclick()=2 and TileX<=MapSize and TileY<=MapSize

dec Grid(TileX,TileY),1

wait 100

endif

Here's a little bit of debugging, showing the tiles our mouse is over.

text 580,0,str$(currentx+relativeTileX)

text 580,20,str$(currenty+relativeTileY)

text 580,40,str$(relativeTileX)

text 580,60,str$(relativeTileY)

sync

loop `Go back to our do, and start all over!

Section 4 - Notes and Closing

Contact: yellow1dbp@hotmail.com

Notes:

- Slow performance? Try decreasing the resolution, the mapsize, the dimensions, the tile size, and running in full screen exclusive mode.

- Still slow performance? Make sure you don’t have any/many other programs running the background while you program. J

What’s to come?

- Next newsletter we’ll start putting the tile engine to use, as I show you how to make media for a tile engine, scrolling backgrounds, collisions, and even our own little hero!

Until the next tutorial, keep reading, practicing, and most of all, playing with code.

Mike Shah